<template>
  <div class="bg-[url('@/assets/images/home-bg.jpg')] bg-cover bg-center bg-repeat">
    <div class="h-5rem bg-black opacity-50 p-10px box-border">
      <a-row align="center" justify="space-between">
        <a-col :span="6">
          <a-space size="large">
            <a-image src="/src/assets/images/logo.png"></a-image>
            <a-typography-text class="header-text"> 非物质文化遗产 </a-typography-text>
          </a-space>
        </a-col>
        <a-col :span="4">
          <ul class="bg-black header-text list-none flex w-md">
            <li class="item" @click="jump('/home')">首页</li>
            <li class="item" @click="jump('/publish')">发布</li>
          </ul>
        </a-col>
        <a-col :span="6">
          <a-row align="center" justify="end">
            <a-typography-text class="header-text mr-15px">
              {{ dayjs(new Date()).format('YYYY-MM-DD') }}
            </a-typography-text>
            <a-typography-text
              v-show="flag"
              class="header-text mr-15px cursor-pointer"
              @click="() => router.push('/user/login')"
            >
              未登录
            </a-typography-text>
            <a-dropdown trigger="hover" @select="onSelect">
              <a-avatar class="mr-15px" v-show="!flag">
                <img alt="avatar" :src="currentUser.userAvatar" />
              </a-avatar>
              <template #content>
                <a-doption value="logout">退出登录</a-doption>
              </template>
            </a-dropdown>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div className="container mx-auto p-4 mb-50px ">
      <h1 className="text-2xl font-bold mb-4">活动日历</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="md:col-span-2">
          <a-calendar v-model="date" class="bg-white rounded-md shadow-2xl" />
        </div>
        <div>
          <div class="bg-white rounded-md shadow-2xl p-20px">
            <a-steps direction="vertical" :current="1">
              <a-step :description="item.date" v-for="(item, index) in list" :key="index">{{
                item.title
              }}</a-step>
            </a-steps>
          </div>
        </div>
      </div>
    </div>
    <!-- 传统文化介绍 -->
    <div class="w-100% h-62.5rem flex mt-10 p-xl box-border">
      <div
        class="bg-[url('@/assets/images/introduce.jpg')] bg-cover bg-center w-20% rounded-lg flex justify-center items-center"
      >
        <a-space direction="vertical" align="center">
          <a-typography-text
            class="header-text tracking-0.625rem text-30px"
            style="writing-mode: vertical-lr"
          >
            展览
          </a-typography-text>
          <a-typography-text
            @click="jump('/exhibit')"
            class="header-text cursor-pointer tracking-0.625rem text-0.9375rem"
          >
            查看更多
          </a-typography-text>
        </a-space>
      </div>
      <div
        class="box cursor-pointer"
        id="introduce"
        @click="toDetail(post.id)"
        v-for="post in postList?.filter((i) => i.category == 1)?.slice(0, 5)"
        :key="post.id"
      >
        <img :src="post.image" />
        <span class="font-400 text-30px font-serif"> {{ post.title }} </span>
      </div>
    </div>
    <!-- 传承人 -->
    <a-row
      align="center"
      class="h-43.75rem bg-[url('@/assets/images/ccr-bg.jpg')] bg-cover bg-center"
    >
      <a-col :span="12" class="bg-[url('@/assets/images/left.png')] bg-cover bg-center size-100%">
      </a-col>
      <a-col :span="12" class="size-100% p-0.9375rem box-border">
        <a-scrollbar style="height: 40rem; overflow: auto">
          <div
            @click="toDetail(post.id)"
            v-for="post in postList.filter((i) => i.category == 2)"
            :key="post.id"
            class="mb-0.9375rem cursor-pointer"
          >
            <a-row align="center">
              <a-col :span="4">
                <a-image height="100" width="100" :src="post.image" />
              </a-col>
              <a-col :span="15">
                <p class="text-1.875rem text-white font-serif">
                  {{ post.title }}
                </p>
              </a-col>
            </a-row>
          </div>
        </a-scrollbar>
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
//@ts-ignore
import {
  PostControllerService,
  type LoginUserVO,
  type PostQueryRequest,
  type PostVO,
} from '@/servers'
//@ts-ignore
import { ResponseCode } from '@/servers/core/request'
//@ts-ignore
import { useUserStore } from '@/stores'
import dayjs from 'dayjs'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const currentUser = computed<LoginUserVO>(() => userStore.currentUser)
const router = useRouter()
const flag = ref(!userStore.currentUser.id)
const postList = ref<PostVO[]>([])
const date = ref(new Date())
const searchParams: PostQueryRequest = reactive({
  current: 1,
  pageSize: 100,
})
const list = ref([
  {
    title: '团队会议',
    date: '2024-1-1',
  },
  {
    title: '项目截止日期',
    date: '2024-1-2',
  },
  {
    title: '生日聚会',
    date: '2024-1-3',
  },
  {
    title: '参加活动',
    date: '2024-1-4',
  },
  {
    title: '参加比赛',
    date: '2024-1-5',
  },
  {
    title: '生日聚会',
    date: '2024-1-3',
  },
  {
    title: '参加活动',
    date: '2024-1-4',
  },
  {
    title: '参加比赛',
    date: '2024-1-5',
  },
])
const toDetail = (id: any) => {
  router.push({
    name: 'detail',
    params: { id },
  })
}
const loadData = async () => {
  const res = await PostControllerService.listPostVoByPageUsingPost(searchParams)
  if (res.code == ResponseCode.SUCCESS) {
    postList.value = res.data.records
  }
}
const onSelect: any = async (key: string) => {
  switch (key) {
    case 'logout':
      await userStore.logout()
      flag.value = true
      break
  }
}
const jump = (path: string) => {
  router.push(path)
}
onMounted(async () => {
  await loadData()
})
</script>
<style scoped>
.item {
  --at-apply: 'w-3.125rem hover:(border-b-0.375rem border-b-solid) transition-all duration-100 ease-linear cursor-pointer';
}
.shell {
  width: 90%;
  height: 43.75rem;
  display: flex;
}
.box {
  flex: 1;
  overflow: hidden;
  transition: 0.5s;
  margin: 0 0.625rem;
  box-shadow: 0.625rem 0.625rem 1.25rem rgba(0, 0, 0, 0.5);
  border-radius: 1.25rem;
}
.box > img {
  width: 200%;
  height: 90%;
  object-fit: cover;
  transition: 0.5s;
}
.box > span {
  text-align: center;
  line-height: 6.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box:hover {
  flex-basis: 20%;
}
.box:hover > img {
  height: 100%;
  width: 100%;
}
</style>
